<template>
  <div class="table-responsive bg-white" >
    <table class="table table-striped table-hover table-sm" :class="borderType">
      <thead class="bg-secondary text-white">
      <tr>
        <th v-for="th in cols" :key="th.key" class="text-nowrap " :class="[th.className,{'text-center':th.align==='center'},{'text-right':th.align==='right'}]">
          {{th.title}}
        </th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="v in tabData">
        <td v-for="td in dataTds" :key="td.key" class="text-nowrap" :class="[td.className, v.className,v.classNameCell[td.key],{'text-center':td.align==='center'},{'text-right':td.align==='right'}]" :width="td.width" :height="td.height">
          {{v[td.key]}}
        </td>
        <td v-for="td in actionTds" :key="td.key" class="text-nowrap" :class="[td.className, v.className,v.classNameCell[td.key],{'text-center':td.align==='center'},{'text-right':td.align==='right'}]" :width="td.width" :height="td.height">
          <button v-for="diy in td.diy" type="button" class="btn btn-link btn-sm m-0 py-0 pl-0 pr-1"  @click="diy.fn(v[diy.cbfpMapColKey])"  >
            {{diy.title}}
          </button>
        </td>
      </tr>
      </tbody>
      <tfoot>
      <tr v-if="data.length<1">
        <td :colspan="cols.length">
          <div class="jumbotron jumbotron-fluid text-center bg-light m-0 py-5">
            <h5 class="text-success">暂无数据</h5>
          </div>
        </td>
      </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
  export default {
    props: {
      cols: {
        type: Array,
        required: true,
      },
      data: {
        type: Array,
        required: true,
      },
      border: {},
    },
    computed: {
      actionTds() {
        return this.cols.filter(function (v) {
          return typeof v.diy !== "undefined";
        });
      },
      dataTds() {
        return this.cols.filter(function (v) {
          return typeof v.diy === "undefined";
        });
      },
      borderType() {
        let type;
        if (typeof this.border === 'undefined') {
          type = "";
        } else if (this.border === "none") {
          type = "table-borderless";
        } else {
          type = "table-bordered";
        }
        return type;
      },
      tabData() {
        // 找出需要映射的列
        let toMap = [];
        for (let v of this.cols) {
          if (typeof v.map === 'undefined') {
            continue;
          }
          toMap[v.key]= v.map;
        }
  
        let tabData = [];
        for (let i in this.data) {
          //映射数据
          for (let map in toMap) {
            this.data[i][map]=toMap[map][this.data[i][map]]?toMap[map][ this.data[i][map]]:this.data[i][map];
          }
          
          //处理空样式
          if (typeof this.data[i].classNameCell === "undefined") {
            this.data[i].classNameCell = {};
          }
          
          tabData.push(this.data[i]);
        }
  
        return tabData;
      }
    },
    mounted() {
      // dump(this.dataTds);
      // dump(this.actionTds);
      // dump(this.tabData);
    },
  }
</script>

<style scoped lang="scss">

</style>
